{% extends "base.html" %}

{% block menu %}
    <a href='/account/list'>Dashboard</a> |
    <a href='report/'>Report</a> |
    <a href='new'>Create Account</a> | 
    <a id='create_trans' href='new'>Create Transaction</a>
{% endblock %}

{% block sidenav %}
<div id='accounts_menu' style='display:none' class="radiusCorner">
    <h1 class="topRadiusCorner">My Accounts</h1>
    <div id='accounts'>
    {% for type in types %}
        <h2>{{ type }}</h2>
        <ul>
        {% for account in accounts %}
            {% ifequal account.type type %}
                <li>
                {% include "account/account_item.html" %}
                </li>
            {% endifequal %}
        {% endfor %}
        </ul>
    {% endfor %}
    </div>
    <div id='tags'>
    <ul>
    {% for tag, type in tags %}
        {% ifnotequal tag.count 0 %}
            <span><a id={{ tag.key.id }} href='#' class='{{ type }}'>{{ tag.name }} ({{ tag.count }})</a><span>
        {% endifnotequal %}
    {% endfor %}
    </ul>
    </div>
    <ul>
        <a id='transaction_favorite' href='#'>Starred <img src="/img/star_on.gif" /></a>
    </ul>
    <div id='date_query' style='display: none'>
        <ul>
            <label for='min_date'>min date:</label>
            <input id='min_date' name='min_date'>
        </ul>
        <ul>
            <label for='max_date'>max date:</label>
            <input id='max_date' name='max_date'>
        </ul>
        <ul>
            <input id='date_query' type='button' value='Date Query'>
        </ul>
    </div>
</div>
{% endblock %}

{% block content %}
<label id='loading'><img src='/img/busybar_1.gif' alt='Please wait...'></label>
<div id='accounts_content' style='display:none;'>
    {% for account in accounts %}
    <div id="account_{{ account.key.id }}_transaction_list" class="transaction_list" style="display: none;">
        <table cellspacing="0" class="bottomRadiusCorner">
            <caption class="topRadiusCorner">{{ account.name }} - Transaction List</caption>
			<colgroup>
				<col id="description_col" />
				<col id="amount_col" />
				<col id="is_income_col" />
				<col id="tag_col" />
				<col id="trasnaction_date_col" />
				<col id="operation_col" />
			</colgroup>
            <thead>
                <tr>
                    <th scope="col">Description</th>
                    <th scope="col">Amount</th>
                    <th scope="col">Is income?</th>
                    <th scope="col">Tag</th>
                    <th scope="col">Transaction Date</th>
                    <th scope="col">Operation</th>
                </tr>
            </thead>
            <tbody class='list'>
                <tr><td colspan="6">Click <em>Account</em></td></tr>
            </tbody>
            <tbody class='margin'>
                <tr><td colspan="6"></td></tr>
            </tbody>
            <tfoot>
                <tr>
                    <th align="left" colspan="6">Status</th>
                </tr>
            </tfoot>
        </table>
    </div>
    {% endfor %}
    <p>
    <!--<a id='transaction_form' href='#'>Create New Transaction</a>-->
    <div id="transaction_form" style='display: none'>
       <form action="new" method="post">
            <fieldset>
                <input id="account_id" name="account_id" type="hidden" />
                <input id="transaction_id" name="transaction_id" type="hidden" />
                <p>
                <label for="description">Description:</label>
                <input id="description" name="description" maxlength="100" />
                </p>
                <p>
                <label for="amount">Amount:</label>
                <input id="amount" name="amount" maxlength="100" />
                </p>
                <p>
                <label for="is_income">flow:</label>
                <input type=radio id="in" class="is_income" name="is_income" value="in">
                <label for="in">in</label>
                <input type=radio id="out" class="is_income" name="is_income" checked value="out">
                <label for="out">out</label>
                </p>
                <p>
                <label for="tag">Tag:</label>
                <input id="tag" name="tag" maxlength="100" />
                </p>
                <p>
                <label for="transaction_date">Date:</label>
                <input id="transaction_date" name="transaction_date" maxlength="100" />
                <div id="cal1Cont"></div>
                </p>
                <p>
                <input id="btn_commit" type="submit" style="display: None"/>
                </p>
            </fieldset>
        </form>
    </div>
    </p>
    <input id="current_account" type="hidden" />
    <input id="current_account_id" type="hidden" />
</div>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="/js/json.js"></script>
<script type="text/javascript" src="/js/account.js"></script>
{% endblock %}
